<template>
	<view>
		<text class="evaluate" @click="submitEvaluation">评价</text>
		<u-popup :show="show" :round="40" mode="bottom" :closeOnClickOverlay="false">
			<view class="Pop-Frame-background">
				<view class="Pop-Frame-evaluate-background">
					<view class="fictitious"></view>
					<text class="evaluate-txt">评价</text>
					<i class="close-icon" @click="close"></i>
				</view>
				<view class="Product-evaluation-background">
					<view class="Product-evaluation">
						<view class="Product-images-background">
							<!-- 放头像 -->
							<view class="Product-images"></view>
							<text class="Product-Name"></text>
						</view>
						<view class="Number-of-evaluation-stars">
							<view class="score-background">
								<text class="score-txt">评分</text>
								<u-rate :count="count" :size="50" v-model="value"></u-rate>
							</view>
						</view>
					</view>
					<!-- 评价内容 -->
					<u-textarea v-model="value02" placeholder="多多描述商品和使用感受,能帮助到更多感兴趣的小伙伴哦~" :maxlength="300"
						:height="200" class="Evaluation-box"></u-textarea>
				</view>
				<view class="Submit-background">
					<text :class="['Submit', { 'Submit-disabled': isSubmitDisabled }]" :disabled="isSubmitDisabled"
						@click="handleSubmit">提交评价</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showSecondPopup" @close="close" :closeOnClickOverlay="true">
			<view class="Evaluation-successful-background">
				<view class="Submitted-evaluation-background">
					<view class="fictitious-02"></view>
					<view class="Submitted-evaluation-txt-background">
						<i class="Submitted-evaluation-txt-icon"></i>
						<text class="Submitted-evaluation-txt">已提交评价</text>
					</view>
					<i class="Wrong-number" @click="close"></i>
				</view>
				<text class="Purchase-experience-text">谢谢你的评价,晒出你的购买体验吧</text>
				<view class="Specific-products-background">
					<view class="Specific-product-images"></view>
					<view class="Specific-product-details">
						<view class="Specific-product-description-and-name"></view>
						<text class="Product-remarks"></text>
						<view class="Sunbathing-background">
							<view class=""></view>
							<view class="Sun-order-button">晒单</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showSecondPopup: false,
				count: 5,
				value: 0,
				value02: '',
				reviewsVo: {
					rating: 0,
					reviewText: '',
				},
			};
		},
		computed: {
			isSubmitDisabled() {
				return this.value < 1 || !this.value02.trim();
			},
		},
		methods: {
			close() {
				this.show = false;
				this.showSecondPopup = false
			},
			submitEvaluation() {
				this.show = true;
			},
			handleSubmit() {
				if (!this.isSubmitDisabled) {
					this.reviewsVo.rating=this.value;
					this.reviewsVo.reviewText=this.value02
					this.request("/productReviews/insertProductReviews", "post", this.reviewsVo)
						.then((res) => {
							console.log(res);
							this.asd = res.data;
						})
						.catch((err) => {
							console.log(err);
						});
				}
				this.show = false;
				this.showSecondPopup = true;
			},
		},
	};
</script>

<style scoped>
	.evaluate {
		display: block;
		width: 200rpx;
		height: 100rpx;
		border: 1rpx solid #ccc;
		margin: 30rpx auto;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		font-size: 45rpx;
	}

	.Pop-Frame-background {
		height: 1200rpx;
		background-color: #f6f6f6;
		border-radius: 40rpx;
	}

	.Pop-Frame-evaluate-background {
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fictitious {
		width: 100rpx;
		height: 100rpx;
	}

	.evaluate-txt {
		font-size: 45rpx;
	}

	.close-icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 20rpx;
		background-image: url("../../static/icon/close.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.Product-evaluation-background {
		width: 100%;
		height: 800rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}

	.Product-evaluation {
		width: 680rpx;
		height: 350rpx;
		margin: auto;
		border-bottom: 1rpx solid #f6f6f6;
	}

	.Product-images-background {
		width: 100%;
		height: 150rpx;
		display: flex;
	}

	.Product-images {
		width: 150rpx;
		height: 150rpx;
		border: 1px solid black;
	}

	.Product-Name {
		width: 450rpx;
		height: 70rpx;
		text-align: center;
		margin-left: 25rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 70rpx;
		border: 1px solid black;
	}

	.Number-of-evaluation-stars {
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;
	}

	.score-background {
		width: 100%;
		height: 100rpx;
		display: flex;
	}

	.score-txt {
		font-size: 40rpx;
		line-height: 70rpx;
		margin: 20rpx;
	}

	.Submit-background {
		width: 100%;
		height: 170rpx;
		background-color: #ffffff;
		margin-top: 80rpx;
		display: flex;
	}

	.Submit {
		display: block;
		width: 700rpx;
		height: 100rpx;
		background-color: #eb3e49;
		margin: 35rpx auto;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		color: white;
		font-size: 45rpx;
	}

	.Submit-disabled {
		background-color: #f1abb3;
		pointer-events: none;
	}

	.Evaluation-box {
		width: 650rpx;
		margin: auto;
		background-color: #f6f6f6;
	}

	.Evaluation-successful-background {
		height: 550rpx;
	}

	.Submitted-evaluation-background {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.Submitted-evaluation-txt-background {
		display: flex;
		align-items: center;
		width: 300rpx;
		height: 100rpx;
		text-align: center;
		font-size: 35rpx;
	}

	.Submitted-evaluation-txt-icon {
		width: 60rpx;
		height: 60rpx;
		background-image: url("../../static/icon/Submitted.png");
		background-repeat: no-repeat;
		background-size: cover;
		margin-left: 50rpx;
	}

	.fictitious-02 {
		width: 100rpx;
		height: 100rpx;
	}

	.Submitted-evaluation-txt {
		margin-left: 15rpx;
	}

	.Wrong-number {
		width: 60rpx;
		height: 60rpx;
		background-image: url("../../static/Myimg/Exclamation mark.png");
		background-repeat: no-repeat;
		background-size: cover;
		margin-right: 25rpx;
	}

	.Purchase-experience-text {
		display: block;
		text-align: center;
	}

	.Specific-products-background {
		width: 100%;
		height: 350rpx;
		background-color: #f6f6f6;
		margin-top: 25rpx;
		display: flex;
		align-items: center;
	}

	.Specific-product-images {
		width: 300rpx;
		height: 300rpx;
		border: 1rpx solid black;
		margin-left: 30rpx;
	}

	.Specific-product-details {
		width: 490rpx;
		height: 300rpx;
	}

	.Specific-product-description-and-name,
	.Product-remarks {
		width: 420rpx;
		height: 80rpx;
		margin: auto;
		line-height: 80rpx;
		border: 1rpx solid black;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 70rpx;
	}

	.Product-remarks {
		display: block;
		width: 240rpx;
		margin-left: 13rpx;
		color: #ccc;
	}

	.Sunbathing-background {
		width: 100%;
		height: 130rpx;
		margin-left: 13rpx;
		display: flex;
		justify-content: space-between;
	}

	.Sun-order-button {
		width: 150rpx;
		height: 80rpx;
		border: 1rpx solid #ccc;
		border-radius: 45rpx;
		margin-right: 30rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 20rpx;
	}
</style>